<template>
  <div class="comment-container" ref="comment">
    <h2>评论 · {{ total }}</h2>
    <div class="comment-box" >
      <!-- 头像 -->
      <div class="comment-box-avatar">
        <el-avatar :size="40" :src="avatar"></el-avatar>
      </div>
      <!-- 评论框 -->
      <div class="comment-box-input">
        <el-input
          type="textarea"
          placeholder="你想说点什么..."
          v-model="content"
          maxlength="500"
          minlength="1"
          :autosize="{ minRows: 1, maxRows: 3 }"
          resize="none"
          highlight-first-item
          show-word-limit
        >
        </el-input>
        <div class="el-input__comment">
          <el-button type="primary" plain size="small" @click="addComment"
            >发表评论</el-button
          >
        </div>
        <a><i class="iconfont icon-biaoqing-xue el-input__biaoqin"></i></a>
        <a><i class="iconfont icon-tupian el-input__tupian"></i></a>
      </div>
    </div>

    <!-- 一级评论item -->
    <div class="comment-item" v-for="item in commentList" :key="item.id" >
      <!-- 一级评论 评论文章 -->
      <div class="author">
        <div class="left">
          <a @click="$router.push({name: 'User', params: { user_id: `${item.user_id}` }})"><el-avatar :size="40" :src="item.comment_user.avatar"></el-avatar></a>
          <div>
            <b @click="$router.push({name: 'User', params: { user_id: `${item.user_id}` }})"><a>{{ item.comment_user.nickname }}</a></b>
            <p>{{ item.content }}</p>
            <b
              ><a @click="huifu(item)">{{
                is_huifu && item.id == parentId ? "取消回复" : "回复"
              }}</a></b
            >
            <span>· {{ item.createdAt | time }}</span>
          </div>
        </div>
        <a><i class="iconfont icon-dianzan" :class="{ 'is-dianzan': commentIds.indexOf(item.id)>=0 }" @click="clickDianZan(item.id)">
          </i>{{ item.like_count }}</a>
      </div>

      <!-- 回复区域  -->
      <div class="huifu" >
          <!-- 一级回复评论框 -->
          <div
            class="comment-box huifu-comment-box"
            v-if="is_huifu && item.id  == parentId "
          >
          <!-- 评论框 -->
          <div class="comment-box-input">
              <el-input
                type="textarea"
                :placeholder="huifuPlaceholder"
                v-model="huifuContent"
                maxlength="500"
                minlength="1"
                :autosize="{ minRows: 1, maxRows: 3 }"
                resize="none"
                highlight-first-item
                show-word-limit
              >
              </el-input>
              <div class="el-input__comment">
                <el-button type="primary" plain size="small" @click="huifuComment"
                  >发表评论</el-button
                >
              </div>
              <a><i class="iconfont icon-biaoqing-xue el-input__biaoqin"></i></a>
              <a><i class="iconfont icon-tupian el-input__tupian"></i></a>
            </div>
          </div>
          <!-- 二级评论item -->
          <div  class="comment-item" v-for="huifu in item.children" :key="huifu.id" >
            <div class="author">
              <div class="left">
                <a @click="$router.push({name: 'User', params: { user_id: `${huifu.user_id}` }})"><el-avatar :size="30" :src="huifu.comment_user.avatar" ></el-avatar></a>
                <div>
                  <b  @click="$router.push({name: 'User', params: { user_id: `${huifu.user_id}` }})"><a>{{ huifu.comment_user.nickname }}</a> </b>
                  <a>回复</a>
                  <a @click="$router.push({name: 'User', params: { user_id: `${huifu.reply_user_id}` }})"
                  >{{ huifu.reply_user.nickname }}</a>
                  <p>{{ huifu.content }}</p>
                  <b
                    ><a @click="huifuf(huifu)">{{
                      is_huifu && huifu.id == huifuid ? "取消回复" : "回复"
                    }}</a></b
                  >
                  <span>· {{ huifu.createdAt | time }}</span>
                </div>
              </div>
              <a><i class="iconfont icon-dianzan" :class="{ 'is-dianzan': commentIds.indexOf(huifu.id)>=0}" @click="clickDianZan(huifu.id)"></i>{{ huifu.like_count }}</a>
            </div>
            <!-- 二级回复评论框 -->
            <div
              class="comment-box huifu-comment-box"
              v-if="is_huifu && huifu.id  == huifuid "
            >
              <!-- 评论框 -->
              <div class="comment-box-input">
                <el-input
                  type="textarea"
                  :placeholder="huifuPlaceholder"
                  v-model="huifuContent"
                  maxlength="500"
                  minlength="1"
                  :autosize="{ minRows: 1, maxRows: 3 }"
                  resize="none"
                  highlight-first-item
                  show-word-limit
                >
                </el-input>
                <div class="el-input__comment">
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    @click="huifuComment"
                    >发表评论</el-button
                  >
                </div>
                <a
                  ><i class="iconfont icon-biaoqing-xue el-input__biaoqin"></i
                ></a>
                <a><i class="iconfont icon-tupian el-input__tupian"></i></a>
              </div>
            </div>
          </div>

      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { toTree } from '@/utils'
import { getCommentList, addComment, addCommentLikings, deleteCommentLikings, getCommentLikingsList } from '@/api/comment'
export default {
  name: 'Comment',
  props: ['article_id'],
  data () {
    return {
      content: '',
      commentList: [],
      queryInfo: {
        pageNum: 1, // 分页页码
        pageSize: 20, // 页面数据条数
        article_id: this.article_id // 根据文章id查询评论
      },
      total: 0,
      is_huifu: false, // 回复评论框显示状态
      huifuContent: '', // 回复内容
      huifuPlaceholder: '回复', // 回复评论框的内容
      parentId: '', // 回复评论的id
      reply_user_id: '', // 被回复的用户id
      parentIdd: '',
      huifuid: '',
      commentIds: [] // 当前用户点赞过评论的ids
    }
  },
  created () {
    this.getCommentList()
    this.getCommentLikingsList()
  },
  computed: {
    ...mapGetters(['user_name', 'userId', 'avatar'])
  },
  mounted () {
    this.toMiaodian()
  },
  methods: {
    toMiaodian () {
      if (this.$route.hash) {
      //  document.getElementById("comment").scrollIntoView({behavior: "smooth"});
        this.$refs.comment.scrollIntoView({ behavior: 'smooth' })
      }
    },
    // 获取当前用户点赞过的全部信息
    async getCommentLikingsList () {
      this.commentIds = await getCommentLikingsList()
    },
    // 对评论点赞  // 取消对评论点赞
    async clickDianZan (comment_id) {
      if (this.commentIds.indexOf(comment_id) < 0) {
        const res = await addCommentLikings({ comment_id })
        // console.log('对评论点赞',res);
        this.getCommentLikingsList()
        this.getCommentList()
      } else {
        const res = await deleteCommentLikings(comment_id)
        // console.log('取消对评论点赞',res);
        this.getCommentLikingsList()
        this.getCommentList()
      }
    },
    // 获取评论列表
    async getCommentList () {
      const { list, pageNum, pageSize, total } = await getCommentList(
        this.queryInfo
      )
      // 根据评论信息里的id  循环评论id到新数组
      // this.commentIds =  list.map(item => {
      //   return item.id;
      // });
      // console.log("当前评论的id====",this.commentIds);
      // await console.log(newlist);
      // console.log("转化树形的评论数据===",toTree(list));
      this.commentList = toTree(list)
      // this.commentList = list;
      this.queryInfo.pageNum = Number(pageNum)
      this.queryInfo.pageSize = Number(pageSize)
      this.total = total
      // console.log("文章评论数据===", list);
    },

    huifuf (item) {
      console.log('回复二级')
      this.huifuPlaceholder = `回复 @ ${item.comment_user.user_name}` // 回复框显示回复谁
      // this.parentId = item.parentId; // 评论的id
      this.parentIdd = item.parentId // 评论的id
      this.reply_user_id = item.user_id // 被回复的用户id
      this.is_huifu = !this.is_huifu // 显示回复框
      // this.is_huifu = true
      this.huifuid = item.id
      this.parentId = ''
    },
    // 点击回复按钮
    huifu (item) {
      console.log('回复一级')
      this.huifuid = ''
      this.huifuPlaceholder = `回复 @ ${item.comment_user.user_name}` // 回复框显示回复谁
      this.parentId = item.id // 评论的id
      this.reply_user_id = item.user_id // 被回复的用户id
      this.is_huifu = !this.is_huifu // 显示回复框
      // this.is_huifu = true
    },
    // 添加评论 对文章评论
    async addComment () {
      await addComment({
        article_id: this.article_id,
        user_id: this.userId,
        content: this.content
      })
      this.$message.success('评论成功')
      this.getCommentList()
      this.content = '' // 清空评论的内容
      this.$emit('updateContent') // 告诉父组件 文章详情组件 刷新数据更新评论数据
    },
    // 点击发表回复评论
    async huifuComment () {
      // 发网络请求
      await addComment({
        article_id: this.article_id, // 评论的文章ID
        user_id: this.userId, // 评论的用户id
        content: this.huifuContent, // 回复的内容
        reply_user_id: this.reply_user_id, // 回复哪个用户
        parentId: this.parentId ? this.parentId : this.parentIdd // 回复的id  默认是0 对文章评论
      })
      // 请求成功后
      this.$message.success('回复成功') // 评论成功 消息提示用户
      this.huifuPlaceholder = '' // 清空回复框内容
      this.huifuContent = '' // 清空上一次回复的内容 这样下次点开回复就不会显示之前的评论
      this.is_huifu = !this.is_huifu // 隐藏回复框
      this.getCommentList() // 调用刷新评论的数据列表
      this.$emit('updateContent', 'up') // 告诉父组件 文章详情组件 刷新数据更新评论数据
    }
  }
}
</script>
<style lang="scss" scoped>
.comment-container {
   .is-dianzan:hover{
          // color: #8397ac !important;
          color: #66B1FF !important;
        }
        .is-dianzan{
          color: #409EFF !important;
        }
  margin-top: 60px;
  // width: 100%;
  .comment-box {
    display: flex;
    // width: 100%;
    // height: 200px;
    // background-color: rgb(158, 84, 84);
    padding: 10px 0px 10px 0px;
    .comment-box-input:hover {
      border: 1px solid #6c81ac;
    }
    .comment-box-avatar {
      margin-right: 15px;
    }
    .comment-box-input {
      // margin-left: 15px;
      width: 100%;
      position: relative;
      background-color: #f2f3f5;
      border: 1px solid #f2f3f5;
      // background-color: #6c81ac;
      border-radius: 6px;
      // padding: 50px;
      .el-input__biaoqin {
        position: absolute;
        bottom: 15px;
        left: 10%;
        color: #abb0bb;
      }
      .el-input__tupian {
        position: absolute;
        font-size: 14.5px;
        bottom: 15px;
        left: 15%;
        color: #abb0bb;
      }
      .el-input__comment {
        color: #909399;
        background: none;
        position: absolute;
        font-size: 12px;
        bottom: 15px;
        right: 15px;
      }

      .el-textarea {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: bottom;
        font-size: 16px;
        //  margin:20px;
        padding-bottom: 50px;
        background-color: none;

        ::v-deep .el-textarea__inner {
          display: block;
          resize: vertical;
          padding: 15px 15px 0px 15px;
          line-height: 1.5;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 100%;
          font-size: inherit;
          color: #606266;
          background-color: #f2f3f5;
          background-image: none;
          border: 0px solid #f2f3f5;
          border-radius: 4px;
          -webkit-transition: border-color 0.2s
            cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        ::v-deep.el-input__count {
          color: #c6c9ce;
          background: none;
          position: absolute;
          font-size: 14px;
          bottom: 17px;
          left: 15px;
        }
      }
    }
  }
  .huifu {
    padding: 0px 15px 0px 15px;
    // width: 100% !important;
    // height: 600px;
    margin-left: 55px;
    background: #f9fafb;
    // background: #fafcfc;
    border-radius: 5px;
    // .huifu-comment-box {
    // }
  }
  .comment-item {
    a:hover{
      color: #66B1FF;
    }
    //  background-color: rgb(231, 227, 227);
    .author {
      display: flex;
      justify-content: space-between;
      padding: 15px 0 5px 0;
      margin:1px 0px;
      //  background: #aabfd4;
      .icon-dianzan {
        font-size: 20px;
        margin: 10px;
      }
      .left {
        display: flex;
        div {
          margin: 0px 0px 0px 13px;
          b > a {
            font-size: 15.5px;
            // margin-right: 10px;
          }
          span {
            margin: 5px;
            letter-spacing: 1px;
            color: #8a919f;
            font-size: 15.5px;
          }
          p {
            font-size: 15px;
            margin:5px 0px;
            line-height: 1.5;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            // overflow: hidden; //隐藏文字
          }
        }
      }
    }
  }
}
</style>
